<!-- 报修 -->
<template>
  <div>
    <!--   返回上一页 <   -->
    <div class="page-title">
      <div class="flex justify-between" style="margin: 3px 4px 3px 0">
        <div class="flex items-center">
          <van-icon
            name="arrow-left"
            size="20"
            style="border-radius: 50%"
            @click="goBack"
          />
          <div class="ml-[10px]" style="margin-left: 130px">设置中心</div>
        </div>
        <div class="flex items-center">
          <van-icon name="ellipsis" size="20" />
        </div>
      </div>
      <hr />
      <div class="bg-color">
        <div class="card" style="background-color: white">
          <div>
            <div class="setting-flex" @click="router.push('/setting/reUserInfo')">
              <div style="line-height: 40px; margin-left: 10px;">&nbsp;&nbsp;个人信息</div>
              <div style="line-height: 40px;"><el-icon><ArrowRightBold /></el-icon>&nbsp;&nbsp;</div>
            </div>
            <hr />
            <div class="setting-flex" @click="router.push('/setting/authentication')">
              <div style="line-height: 40px; margin-left: 10px;">&nbsp;&nbsp;账号与实名</div>
              <div style="line-height: 40px;"><el-icon><ArrowRightBold /></el-icon>&nbsp;&nbsp;</div>
            </div>
            <hr />
          </div>
        </div>
        <div class="card" style="background-color: white">
          <div>
            <div class="setting-flex" @click="onSweep">
              <div style="line-height: 40px; height: 40px; margin-left: 10px;">&nbsp;&nbsp;消息通知</div>
              <div style="line-height: 40px;"><el-icon><ArrowRightBold /></el-icon>&nbsp;&nbsp;</div>
            </div>
            <hr />
            <div class="setting-flex" @click="onSweep">
              <div class="row-height-text">&nbsp;&nbsp;主题换肤</div>
              <div style="line-height: 40px;"><el-icon><ArrowRightBold /></el-icon>&nbsp;&nbsp;</div>
            </div>
            <hr />
            <div class="setting-flex" @click="onSweep">
              <div class="row-height-text">&nbsp;&nbsp;模式切换</div>
              <div style="line-height: 40px;"><el-icon><ArrowRightBold /></el-icon>&nbsp;&nbsp;</div>
            </div>
            <hr />
            <div class="setting-flex" @click="onSweep">
              <div class="row-height-text">&nbsp;&nbsp;通用</div>
              <div style="line-height: 40px; height: 40px;"><el-icon><ArrowRightBold /></el-icon>&nbsp;&nbsp;</div>
            </div>
            <hr />
            <div class="setting-flex" @click="onSweep">
              <div class="row-height-text">&nbsp;&nbsp;主题换肤</div>
              <div style="line-height: 40px; height: 40px;"><el-icon><ArrowRightBold /></el-icon>&nbsp;&nbsp;</div>
            </div>
            <hr />
            <div class="setting-flex" @click="onSweep">
              <div style="line-height: 40px; height: 40px; margin-left: 10px;">&nbsp;&nbsp;隐私</div>
              <div style="line-height: 40px; height: 40px;"><el-icon><ArrowRightBold /></el-icon>&nbsp;&nbsp;</div>
            </div>
            <hr />
            <div class="setting-flex" @click="onSweep">
              <div class="row-height-text">&nbsp;&nbsp;帮助与反馈</div>
              <div style="line-height: 40px; height: 40px;"><el-icon><ArrowRightBold /></el-icon>&nbsp;&nbsp;</div>
            </div>
            <hr />
          </div>
        </div>
        <div class="card" style="background-color: white">
          <div>
            <div class="setting-flex" @click="router.push('/login')">
              <div class="footer">切换账号</div>
            </div>
            <hr />
          </div>
        </div>
        <div class="card" style="background-color: white">
          <div>
            <div class="setting-flex" style="margin-bottom: 100px" @click="quit('/login')">
              <div class="footer"><span>退出登录</span></div>
            </div>
          </div>
        </div>
        <div style="height: 55px"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import type { FormInstance } from "vant";
import { useUserStore } from "@/store/modules/user";
import { ElMessage } from 'element-plus';
import { ArrowRightBold } from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
// 登录信息
const forms = ref({
  info: "",
  name: "",
  phone: "",
  description: "",
  imgUrl: ""
});
const httpUrl = import.meta.env.VITE_BASE_URL + "/app/file/upload";
// 表单实例
const formRef = ref<FormInstance>();
//#region <倒计时相关>
// 倒计时
//#endregion
// 图片上传成功
const handleAvatarSuccess = (res: any, file: any) => {
  forms.value.imgUrl = res.data;
};
// 功能尚未完成
const onSweep = () => {
  ElMessage.warning("敬请期待~");
};
const onSubmitHandle = async () => {
  console.log("onSubmit");
  // 跳转上一页
  await router.replace(
    route.query?.redirect
      ? decodeURIComponent(route.query?.redirect as string)
      : "/"
  );
};
// 返回上一页
const goBack = () => {
  router.replace("/userCenter");
};
onMounted(() => {
  console.log("route", route);
  console.log("router-onMounted", router);
});
const quit = (path: string) => {
  userStore.Logout();
  router.push(path);
};
</script>

<style scoped lang="less">
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.setting-flex {
  display: flex;
  justify-content: space-between;
}
.row-height-text {
  line-height: 40px;
  margin-left: 10px;
}
.bg-color {
  background-color: rgba(0, 0, 0, 0.05);
  width: 100%;
  height: 100%;
}
.footer {
  line-height: 40px;
  height: 40px;
  margin: 0 40%;
}
</style>
